<template>
    <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
        <el-carousel ref="img" :interval="2000" type="card" :autoplay="flag">
            <el-carousel-item v-for="(item, index) in data" :key="index">
                <el-image fit="cover" :src="item.img"></el-image>
            </el-carousel-item>
        </el-carousel>
        <el-button @click="handleDeleteAll" type="danger"
            ><el-icon><DeleteFilled /></el-icon>清空轮播数据</el-button
        >
        <el-table :data="data" style="width: 100%">
            <el-table-column label="alt" prop="alt" />
            <el-table-column label="img">
                <template #default="scope">
                    <!-- {{ scope.row.img }} -->
                    <a :href="scope.row.img" target="_blank"
                        ><span>{{ scope.row.img }}</span></a
                    >
                </template>
            </el-table-column>
            <el-table-column align="right">
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"> Delete </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog v-model="dialogVisible" title="提示" width="500" :before-close="handleClose">
        <span>确定要删除这一条数据吗？</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">放弃</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogVisibletwo" title="提示" width="500" :before-close="handleClose">
        <span>确定要全部删除吗？</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisibletwo = false">放弃</el-button>
                <el-button type="primary" @click="submittwo">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
import { checklunbo, lunbodele, lunbodeleall } from "@/api/api/lunbo";
export default {
    data() {
        return {
            data: [],
            msg: null,
            flag: false,
            dialogVisible: false,
            dialogVisibletwo: false,
            a: "",
            b: "",
        };
    },
    created() {
        this.getData();
    },
    computed: {},
    mounted() {
        let that = this;
        /* this.msg = setInterval(() => {
            that.$refs.img.next();
        }, 1000); */
    },
    methods: {
        handleDeleteAll() {
            this.dialogVisibletwo = true;
        },
        submittwo() {
            this.dialogVisibletwo = false;
            lunbodeleall().then((res) => {
                console.log("res", res);
                if (res.data.code == 200) {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                    this.getData();
                }
            });
        },
        getData() {
            clearInterval(this.msg);
            let that = this;
            checklunbo().then((res) => {
                this.data = res.data.data;
            });

            this.msg = setInterval(() => {
                that.$refs.img.next();
            }, 2000);
            this.flag = false;
        },
        handleMouseEnter() {
            clearInterval(this.msg);
            this.flag = true;
        },
        /*
        handleMouseLeave() {
            this.msg = setInterval(() => {
                this.$refs.img.next();
            }, 1500);
        }, */
        handleDelete(a, b) {
            this.a = a;
            this.b = b;
            this.dialogVisible = true;
        },
        submit() {
            this.dialogVisible = false;
            let params = {
                bannerid: this.b.bannerid,
            };
            lunbodele(this.b.bannerid).then((res) => {
                console.log("res", res);
                if (res.data.code == 200) {
                    this.getData();
                }
            });
        },
    },
};
</script>
<style lang="css" scoped>
img {
    width: 100%;
    height: 100%;
}
a {
    color: rgb(99, 99, 255);
}
</style>
